<div id="app" v-cloak>
    <el-card class="box-card">
        <el-form class="search" :inline="true" :model="vm" ref="vm" label-position="right" label-width="90px">
            <el-form-item label="资源代码" prop="resCode">
                <el-input v-model="vm.resCode" @keyup.enter.native="onSearch" clearable size="mini" placeholder="请输入资源代码"></el-input>
            </el-form-item>
            <el-form-item label="资源名称" prop="resName">
                <el-input v-model="vm.resName" @keyup.enter.native="onSearch" clearable size="mini" placeholder="请输入资源名称"></el-input>
            </el-form-item>
            <el-form-item label="资源类型" prop="resType">
                <el-select v-model="vm.resType" clearable size="mini" filterable placeholder="请输入资源类型">
                    <el-option key="WEB" label="网页" value="WEB"></el-option>
                    <el-option key="API" label="终端" value="API"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="资源内容" prop="resValue">
                <el-input v-model="vm.resValue" @keyup.enter.native="onSearch" clearable size="mini" placeholder="请输入资源内容"></el-input>
            </el-form-item>
            <el-form-item label="是否免费" prop="free">
                <el-radio-group v-model="vm.free" clearable size="mini">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="是否有效" prop="valid">
                <el-radio-group v-model="vm.valid" clearable size="mini">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="开始日期" prop="startDate">
                <el-date-picker v-model="vm.startDate" clearable size="mini" placeholder="请输入开始日期" type="datetime"
                                value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
            </el-form-item>
            <el-form-item label="结束日期" prop="endDate">
                <el-date-picker v-model="vm.endDate" clearable size="mini" placeholder="请输入结束日期" type="datetime"
                                value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="mini" icon="el-icon-search" @click="onSearch">搜索</el-button>
                <el-button type="warning" size="mini" icon="el-icon-refresh-left" @click="onReset('vm')">重置
                </el-button>
            </el-form-item>
        </el-form>
    </el-card>
    <el-card class="box-card">
        <el-row type="flex" justify="space-between">
            <el-button-group>
                <#if token.hasRes("/ajax/wsys/res/create")>
                <el-button type="success" size="mini" icon="el-icon-plus" @click="onCreate">新增</el-button>
                </#if>

                <#if token.hasRes("/ajax/wsys/res/delete")>
                <el-button type="danger" size="mini" icon="el-icon-delete" @click="onBitchDelete">删除</el-button>
                </#if>

                <el-button type="warning" size="mini" icon="el-icon-share" @click="treeShow = true">结构</el-button>
            </el-button-group>

            <el-button-group>
            <#if token.hasRes("/ajax/wsys/res/template")>
                <el-tooltip effect="dark" content="Excel导入模板下载" placement="bottom">
                    <el-button size="mini" icon="el-icon-date" @click="onTemplate"></el-button>
                </el-tooltip>
            </#if>

            <#if token.hasRes("/ajax/wsys/res/imports")>
                <el-tooltip effect="dark" content="Excel导入" placement="bottom">
                    <el-button size="mini" icon="el-icon-upload2" @click="onImport"></el-button>
                </el-tooltip>
            </#if>

            <#if token.hasRes("/ajax/wsys/res/exports")>
                <el-tooltip effect="dark" content="Excel导出" placement="bottom">
                    <el-button size="mini" icon="el-icon-download" @click="onExport"></el-button>
                </el-tooltip>
            </#if>

                <el-tooltip effect="dark" content="刷新" placement="bottom">
                    <el-button size="mini" icon="el-icon-refresh" @click="onFind"></el-button>
                </el-tooltip>
            </el-button-group>
        </el-row>

        <el-table
                class="data"
                @selection-change="onSelectionChange"
                empty-text="无数据"
                :stripe="true"
                :data="result"
                size="mini">
            <el-table-column
                    align="center"
                    type="selection"
                    width="45">
            </el-table-column>
            <el-table-column
                    align="center"
                    width="140"
                    prop="id"
                    label="主键">
            </el-table-column>
            <el-table-column
                    align="center"
                    width="100"
                    prop="valid"
                    label="是否有效">
                <template slot-scope="scope">
                    <el-tag size="mini" effect="dark" type="success" v-if="scope.row.valid">有效</el-tag>
                    <el-tag size="mini" effect="dark" type="danger" v-if="!scope.row.valid">无效</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    align="center"
                    min-width="120"
                    prop="resCode"
                    label="资源代码">
            </el-table-column>
            <el-table-column
                    align="center"
                    min-width="150"
                    prop="resName"
                    label="资源名称">
            </el-table-column>
            <el-table-column
                    align="center"
                    min-width="100"
                    prop="resType"
                    label="资源类型">
            </el-table-column>
            <el-table-column
                    align="center"
                    min-width="150"
                    prop="resValue"
                    label="资源内容">
            </el-table-column>
            <el-table-column
                    align="center"
                    min-width="100"
                    prop="free"
                    label="是否免费">
                <template slot-scope="scope">
                    <el-tag size="mini" effect="dark" type="success" v-if="scope.row.free">免费</el-tag>
                    <el-tag size="mini" effect="dark" type="danger" v-if="!scope.row.free">授权</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    align="center"
                    min-width="140"
                    prop="createTime"
                    label="创建时间">
            </el-table-column>
            <el-table-column
                    align="center"
                    width="120"
                    fixed="right"
                    label="操作">
                <template slot-scope="scope">
                    <wb-table-ops :arg="scope.row">
                        <wb-table-op value="编辑" icon="el-icon-edit" @click="onEdit"></wb-table-op>
                        <wb-table-op value="删除" icon="el-icon-delete" @click="onDelete"></wb-table-op>
                    </wb-table-ops>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
                background
                v-if="vm.totalCount > vm.pageSize"
                style="margin-top: 10px"
                @current-change="onPageChange"
                @size-change="onPageSizeChange"
                :current-page="vm.pageNumber"
                :page-size="vm.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="vm.totalCount">
        </el-pagination>
    </el-card>

    <el-dialog
            :fullscreen="false"
            :title="form.formTitle"
            :custom-class="'dialog'"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :modal-append-to-body="true"
            :visible.sync="form.formShow">

        <el-page-header slot="title" @back="form.formShow = false" :content="form.formTitle"></el-page-header>

        <el-form class=form" :model="form" :inline="true" :rules="formRules" ref="form"
                 label-position="right" label-width="90px">
            <el-form-item label="资源代码" prop="resCode">
                <el-input v-model="form.resCode" clearable size="mini"
                          placeholder="请输入资源代码"></el-input>
            </el-form-item>
            <el-form-item label="资源名称" prop="resName">
                <el-input v-model="form.resName" clearable size="mini"
                          placeholder="请输入资源名称"></el-input>
            </el-form-item>
            <el-form-item label="资源类型" prop="resType">
                <el-select v-model="form.resType" clearable size="mini" filterable placeholder="请输入资源类型">
                    <el-option key="WEB" label="网页" value="WEB"></el-option>
                    <el-option key="API" label="终端" value="API"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="资源内容" prop="resValue">
                <el-input v-model="form.resValue" clearable size="mini"
                          placeholder="请输入资源描述"></el-input>
            </el-form-item>
            <el-form-item label="是否免费" prop="free">
                <el-tooltip effect="dark" content="对于希望不授权也可以访问的资源可置为免费，即公共资源。" placement="bottom">
                    <el-switch v-model="form.free" active-text="免费" inactive-text="授权" clearable size="mini"></el-switch>
                </el-tooltip>
            </el-form-item>
            <el-form-item label="是否有效" prop="valid">
                <el-radio-group v-model="form.valid" clearable size="mini">
                    <el-radio :label="true">是</el-radio>
                    <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button size="mini" @click="form.formShow = false">取 消</el-button>
            <el-button size="mini" type="primary" @click="onSave">保存</el-button>
        </span>
    </el-dialog>

    <el-drawer
            direction="ltr"
            :visible.sync="treeShow"
            :close-on-click-modal="false"
            :close-on-press-escape="true"
            :modal-append-to-body="true"
            :append-to-body="true"
            @opened="onTreeLoad"
            size="600px">

        <el-page-header slot="title" @back="treeShow = false" content="结构展示"></el-page-header>

        <el-container style="height:100%">
            <el-header>
                <el-row>
                    <el-col :span="12">
                        <el-input
                                clearable
                                size="mini"
                                v-model="treeFilter"
                                prefix-icon="el-icon-search"
                                placeholder="输入过滤关键字"
                                @keyup.enter.native="$refs.tree.filter(treeFilter)"/>
                    </el-col>
                    <el-col :span="11" offset="1">
                        <el-button-group>
                            <el-tooltip effect="dark" content="过滤" placement="bottom">
                                <el-button size="mini" type="primary" icon="el-icon-search" @click="$refs.tree.filter(treeFilter)">查询</el-button>
                            </el-tooltip>
                            <el-tooltip effect="dark" content="删除" placement="bottom">
                                <el-button size="mini" type="primary" icon="el-icon-delete" @click="onTreeDelete">删除</el-button>
                            </el-tooltip>
                            <el-tooltip effect="dark" content="刷新" placement="bottom">
                                <el-button size="mini" type="primary" icon="el-icon-refresh" @click="onTreeLoad">刷新</el-button>
                            </el-tooltip>
                        </el-button-group>
                    </el-col>
                </el-row>
            </el-header>

            <el-main style="height:100%;padding: 0 20px 20px 20px;">
                <el-tree
                        :data="treeData"
                        node-key="id"
                        ref="tree"
                        accordion
                        show-checkbox
                        check-strictly="true"
                        :filter-node-method="onTreeFilter"
                        :default-expanded-keys="treeExpand">
                    <div class="tree" slot-scope="{ node, data }">
                <span>
                    {{ data.resName }}
                    <span style="color: #409EFF">[{{data.resCode}}]</span>
                    <span style="color: #ff0000" v-if="data.free">[免费]</span>
                </span>
                <span>
                    <el-link type="success" @click.stop="onTreeCreate(data)">新增</el-link>
                    <el-link type="primary" @click.stop="onTreeEdit(data)">编辑</el-link>
                    <el-link type="danger" @click.stop="onDelete(data)">删除</el-link>
                </span>
                    </div>
                </el-tree>
            </el-main>
        </el-container>
    </el-drawer>
</div>
<style>
    .tree {
        flex: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
    }
</style>
<script>
    var app = new Vue({
        mixins: [mixinForMgr],
        el: "#app",
        data: {
            module: 'wsys',
            target: 'res',
            vm: {//条件及分页参数
                resCode: null,
                resName: null,
                resType: null,
                resValue: null,
                free: null,
                valid: null,
                startDate: null,
                endDate: null,
                pageNumber: 1,
                pageSize: 10,
                totalCount: 0,
                sortKey: 'RES_CODE',
                sortType: 'ASC'
            },
            form: {//待提交表单
                formTitle: null,
                formShow: false,
                id: null,
                resCode: null,
                resName: null,
                resType: null,
                resValue: null,
                free: null,
                valid: null,
                rowVersion: null
            },
            formRules: {
                resCode: [
                    {required: true, message: '资源代码不能为空', trigger: 'blur'},
                    {min: 1, max: 50, message: '资源代码长度在 1 到 50 个字符', trigger: 'blur'}
                ],
                resName: [
                    {required: true, message: '资源名称不能为空', trigger: 'blur'},
                    {min: 1, max: 50, message: '资源名称长度在 1 到 50 个字符', trigger: 'blur'}
                ],
                resType: [
                    {required: true, message: '资源类型不能为空', trigger: 'blur'},
                ],
                resValue: [
                    {min: 1, max: 255, message: '资源内容长度在 1 到 255 个字符', trigger: 'blur'}
                ],
                free: [
                    {required: true, message: '是否免费不能为空', trigger: 'blur'},
                ],
                valid: [
                    {required: true, message: '是否有效不能为空', trigger: 'blur'},
                ],
            },
            treeShow: false,
            treeFilter: '',
            treeExpand: [],
            treeData: []
        },
        methods: {
            onCreate: function () {
                this.form.formTitle = "资源新增";
                this.form.formShow = true;
                this.form.id = "";
                this.form.resCode = "";
                this.form.resName = "";
                this.form.resType = "";
                this.form.resValue = "";
                this.form.free = false;
                this.form.valid = true;
            },
            onEdit: function (item) {
                this.form.formTitle = "资源编辑";
                this.form.formShow = true;
                this.form.id = item.id;
                this.form.resCode = item.resCode;
                this.form.resName = item.resName;
                this.form.resType = item.resType;
                this.form.resValue = item.resValue;
                this.form.free = item.free;
                this.form.valid = item.valid;
                this.form.rowVersion = item.rowVersion;
            },
            onDelete: function (item) {
                this.$confirm('将删除该项, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    new Ajax("wsys", "res").delete({id: item.id}, function (response) {
                        if (response.errors.length > 0) {
                            nav.e(response.errors[0].message);
                        } else {
                            nav.s("删除成功.");
                            this.onFind();
                        }
                    }.bind(this))
                }.bind(this)).catch(function (action) {

                });
            },
            onTreeCreate: function (pItem) {
                this.form.formTitle = "资源新增";
                this.form.formShow = true;
                this.form.id = "";
                this.form.resCode = pItem.resCode;
                this.form.resName = "";
                this.form.resType = "";
                this.form.resValue = "";
                this.form.free = false;
                this.form.valid = true;
            },
            onTreeDelete: function () {
                var select = this.$refs.tree.getCheckedNodes();
                this.$confirm('将删除已选择的项, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    nav.tipShow("删除中...");
                    select.forAsync(function (item, next) {
                        new Ajax("wsys", "res").delete({id: item.id}, function (response) {
                            if (response.errors.length > 0) {
                                nav.e(response.errors[0].message);
                            } else {
                                this.result.remove(item)
                            }
                            next();
                        }.bind(this))
                    }.bind(this), function () {
                        nav.tipClose();
                        nav.i("批量删除结束.")
                        this.onTreeLoad();
                    }.bind(this))
                }.bind(this)).catch(function (action) {

                });
            },
            onTreeEdit: function (pItem) {
                this.form.formTitle = "资源编辑";
                this.form.formShow = true;
                this.form.id = pItem.id;
                this.form.resCode = pItem.resCode;
                this.form.resName = pItem.resName;
                this.form.resType = pItem.resType;
                this.form.resValue = pItem.resValue;
                this.form.free = pItem.free;
                this.form.valid = pItem.valid;
                this.form.rowVersion = pItem.rowVersion;
            },
            onTreeFilter: function (value, data) {
                if (!value) return true;
                return data.resName.indexOf(value) !== -1
                        || data.resCode.indexOf(value) !== -1
                        || data.resValue.indexOf(value) !== -1;
            },
            onTreeLoad: function () {
                var vm_ = utils.copy(this.vm);
                vm_.pageSize = 0;
                new Ajax("wsys", "res", "tree").post(vm_, function (response) {
                    if (response.errors.length > 0) {
                        nav.e(response.errors[0].message);
                    } else {
                        this.treeData = response.result;
                        // 默认展开第一个节点
                        this.treeExpand = [response.result[0].id];
                    }
                }.bind(this))
            }
        },
        mounted: function () {
            this.onFind();
        }
    })
</script>
